window.addEventListener('load',function(){
    //0.根据图片数量，动态生成小圆圈li
    var ol=document.querySelector('.circle');
    var ul=document.querySelector('.focus ul');

    for (var i=0;i<ul.children.length;i++){
        var li=document.createElement('li');
        //添加自定义属性，用于记号
        // li.setAttribute('data-index',i);
        li.dataset['index']=i;
        ol.appendChild(li);
        // ul.appendChild(li);
    }
    //设置第一个小圆圈为当前element
    ol.children[0].className='current';

    //1.鼠标经过大图片，左右按钮显示
    var focus=document.querySelector('.focus');
    var arrow_l=document.querySelector('.arrow-l');
    var arrow_r=document.querySelector('.arrow-r');

    focus.addEventListener('mouseenter',function(){
        arrow_l.style.display='block';
        arrow_r.style.display='block';
    })
    focus.addEventListener('mouseleave',function(){
        arrow_l.style.display='none';
        arrow_r.style.display='none';
    })

    //2.点击小圆圈，播放对应图片
    ol.addEventListener('click',function(e){
        //事件委托不用this，需要一个target
        var index=e.target.dataset['index'];
        var focuswidth=focus.offsetWidth;
        console.log(focus.offsetwidth);
       

        for (var i=0;i<this.children.length;i++){
            this.children[i].className='';
        }
        e.target.className='current';

        animate(ul, -index * focuswidth);
    })


    // 3.点击左侧按钮，图片移动，小圆圈也移动
     arrow_l.addEventListener('click',function(){
        // alert('ok');
        for(var i=0;i<ol.children.length;i++){
            if(ol.children[i].className=='current'){
                var index=i;
                //  ol.children[i].className='';
                ol.children[i].removeAttribute('class');
                break;
            }
        }
        //切换小圆圈序号
        index--;
        index = index == -1 ? ol.children.length -1:index;
        ol.children[index].className='current';

        //切换图片
        animate(ul,-index * focus.offsetWidth);
    })

    // 4.点击右侧按钮，图片移动，小圆圈也移动
    // var flag=true;//限流阀变量
    arrow_r.addEventListener('click',function(){
        // alert('ok');
        // if(flag){
            flag=false;//执行动画，关闭限流阀，不允许下一次动画执行
            for(var i=0;i<ol.children.length;i++){
                if(ol.children[i].className=='current'){
                    var index=i;
                    ol.children[i].className='';                  
                    break;
                }
            }
            //切换小圆圈序号
            index++;
            index = index == ol.children.length ? 0:index;
            ol.children[index].className='current';
    
            //切换图片
            animate(ul,-index * focus.offsetWidth);
            // animate((ul,-index * focus.offsetWidth),function(){
            //     flag=true;//动画执行，打开限流阀
            // });
        // }
        
    })


    // 5.自动轮播
    var timer=this.setInterval(function(){
        arrow_r.click();
    },2000)
     //鼠标进入，停止播放
    focus.addEventListener('mouseenter',function(){
        clearInterval(timer);
    })
    //鼠标离开，自动播放
    focus.addEventListener('mouseleave',function(){
        timer=setInterval(function(){
            arrow_r.click();
        },2000)      
    })
   
})